<template>
  <el-dropdown trigger="click">
    <el-button size="small" type="primary">
      <span>{{ $t('settings.tabs.title') }}</span>
      <el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="refresh">
          <el-icon><Refresh /></el-icon>{{ $t('settings.tabs.refresh') }}
        </el-dropdown-item>
        <el-dropdown-item @click="maximize">
          <el-icon><FullScreen /></el-icon>{{ $t('settings.tabs.maximize') }}
        </el-dropdown-item>
        <el-dropdown-item divided @click="closeCurrentTab">
          <el-icon><Remove /></el-icon>{{ $t('settings.tabs.closeCurrent') }}
        </el-dropdown-item>
        <el-dropdown-item @click="closeOtherTab">
          <el-icon><CircleClose /></el-icon
          >{{ $t('settings.tabs.closeOthers') }}
        </el-dropdown-item>
        <el-dropdown-item @click="closeAllTab">
          <el-icon><FolderDelete /></el-icon>{{ $t('settings.tabs.closeAll') }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { FullScreen } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { HOME_URL } from '@/config/app'
import { useAppConfigStore } from '@/stores'
import { useTabsStore } from '@/stores'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const tabsStore = useTabsStore()
const appConfigStore = useAppConfigStore()
const reload: Function = inject('refresh') as Function

// refresh current page
const refresh = () => {
  ElMessage({ type: 'success', message: '刷新当前页面 🚀' })
  reload()
}

// maximize current page
const maximize = () => {
  appConfigStore.setMaximize(true)
}

// Close Current
const closeCurrentTab = () => {
  if (route.meta.affixInTabs) return
  tabsStore.removeTabs(route.fullPath)
}

// Close Other
const closeOtherTab = () => {
  tabsStore.closeMultipleTab(route.fullPath)
}

// Close All
const closeAllTab = () => {
  tabsStore.closeMultipleTab()
  router.push(HOME_URL)
}
</script>

<style scoped lang="scss">
.el-dropdown {
  position: absolute;
  top: 8px;
  right: 13px;
}
</style>
